{#该页面在base.html基础上继承#}
{% extends 'visites/include/base.html' %}
{#引入static文件#}
{% load staticfiles %}
{#对应base.html里block内需要填入的内容#}
{% block content %}
<script src="{% static 'visites/js/jquery.min.js' %}"></script>
    <p hidden="hidden" >{% csrf_token %}</p>
    {#    base.html里的block从topbar之后开始，所以这里我们找到该页面topbar下面对应的标签#}
    <div class="page-content-wrapper">
        <div class="container-fluid">
           <div class="table-outside">
               {% for item in cookbook %}
               <fieldset class="menu-info" id="data-id" data-id="{{ item.id }}">
                   <legend>本期信息</legend>
                   <p><span>Banner:</span><img src="/{{ item.banner }}" height="304" width="750"></p>
                   <p><span>状态:</span><b></b>
                   {% if item.status == 'Open'%}
                       <td>正在进行</td>
                   {% else %}
                       <td>订单结束</td>
                   {% endif %}
                   </p>
                   <p><span>社区:</span><b></b>{{ item.community_name }}</p>
                   <p><span>期数:</span><b></b>{{ item.period_number }}</p>
                   <p><span>订餐时间:</span><b></b>{{ item.order_time }}</p>
                   <p><span>送餐时间:</span><b></b>{{ item.delivery_time }}</p>
                   <p><span>本期热推:</span><b></b>{{ item.hot_push }}</p>
               </fieldset>
               <fieldset class="menu-info m-t-40">
                   <legend>本期菜谱</legend>
                   <table class="table order-list">
                       <thead>
                       <tr>

                           <th></th>
                           <th>名称</th>
                           <th>单价</th>
                           <th>备注</th>
                           <th></th>
                       </tr>
                       </thead>
                       <tbody>
                       {% for food in item.menu %}
                       <tr>
                           <td><img src="/{{ food.image }}"></td>
                           <td><b>{{ food.name }}</b></td>
                           <td>￥{{ food.price }}</td>
                           <td>{{ food.remarks }}</td>
                           <td><button class="btn btn-danger none-radius closeFood" data-food-id="{{ food.id}}" data-status="{{ food.status }}">售罄</button> </td>
                       </tr>
                       {% endfor %}
                       </tbody>
                   </table>
               </fieldset>
               {% endfor %}
           </div>
        </div>
    </div>

<script>
//前台状态初始设置
$(".table button").each(function(){

    var status = $(this).attr("data-status");
    if(status == 'Open'){
        $(this).removeClass('btn-primary').addClass('btn-primary').html('售罄');
    }
    else {
        $(this).removeClass('btn-dark').addClass('btn-dark').html('已售罄');
    }
});
$(".closeFood").on("click",function (){
    var id = $("#data-id").attr("data-id");
    var food_id = $(this).attr("data-food-id");
    $.ajax({
        url: 'changeFoodStatus',
        type: 'POST',
        data: {
            id: id,
            food_id:food_id,
        },
        success : function(data) {
            console.log(data);
                if(data==1){
                    alert("菜品状态已变更!");
                    window.location.reload();
                }else if(data == 0){
                    alert("错误！")
                }else if(data == -1){
                    alert("字段为空！")
                }
        }
    });
})
</script>
{#    为了加快前端页面的加载速度我们一般把JS引入写到页面的最底端#}
{% endblock %}